import React from 'react';
import { Text, View, Image, StyleSheet, ART, TouchableOpacity, Alert  } from 'react-native';
import DateTag from './drawTag';


<script src="http://localhost:8097"></script>

class MovieInfo extends React.Component {

    _onPress = () => ( Alert.alert("欢迎观看！"));
    
    _getPoster = () => ( 
         Alert.alert("欢迎观看！")
    )
    render() {
        // const postImage = this.props.data.poster;
        // <Image style={styles.image} source={{uri:postImage}}/>
        return(
                <TouchableOpacity onPress={this._onPress}>
                    <View style={styles.container}>
                        <View>
                         <Image style={styles.image} source={require("../img/zhanlang.png")}/>
                        </View>
                        <View style={styles.textContainer}>
                            <Text style={styles.textTitle}>{this.props.data.movieTitle}</Text>
                            <Text style={styles.textOpinion}>观众影评:{this.props.data.watcherOpinion}</Text>
                            <Text style={styles.textDetail}>导演：{this.props.data.director}</Text>
                            <Text style={styles.textDetail}>主演：{this.props.data.leadingRoles}</Text>
                            <Text style={styles.textDetail}>戳心：{this.props.data.wonderfulSentences}</Text>
                        </View>
                        <View style={styles.dateTag}>
                            <DateTag date={this.props.data.showDate} />
                        </View>
                    </View>
                </TouchableOpacity>
            )
    }
}


const styles = StyleSheet.create({
    container: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    height: 120,
    borderBottomWidth: 1,
    borderColor: '#979797'
  },
    image: {
        width: 70,
        height: 100,
        marginRight: 20
    },
    textTitle: {
        fontSize: 20,
        color: '#000000'
    },
    textOpinion: {
        fontSize: 14,
        color: '#000000'
    },
    textDetail: {
        fontSize: 14,
        color: '#9B9B9B',
        marginTop: 5
    },
    textContainer: {
        flexDirection: 'column',
        alignItems: 'flex-start',
        marginTop: 10
    },
    dateTag: {
        position: 'absolute',
        right: 0,
    }
})


module.exports= MovieInfo;
